<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back fixed>
				<!-- <view slot="back">
					<view id="back_btn" class="domxee_icon fw-bolder" @click="navigateAction('v2.cart.cart')">&#xe600;</view>
				</view> -->
				<view slot="title">
					<view id="title" class="fw-bolder">收银台</view>
				</view>
			</nii-navbar>
		</view>
		<view id="content_wrapper">
			<view id="card">
				<view class="card d-padding">
					<view class="card_box bg_op_8 theme_text">
						<view class="sn fw-bolder">订单号：{{renders.order_sn}}</view>
						<view class="infos d-flex justify-content-between align-items-center">
							<view class="left fw-bolder">
								¥{{(renders.pay_amount/100).toFixed(2)}}
							</view>
							<view class="right">
								<view class="line d-flex align-items-center">
									<view class="name">商品总额</view>
									<view class="amount">¥{{(renders.goods_amount/100).toFixed(2)}}</view>
								</view>
								<view class="line d-flex align-items-center">
									<view class="name">物流费用</view>
									<view class="amount">¥{{(renders.express_amount/100).toFixed(2)}}</view>
								</view>
								<view class="line d-flex align-items-center">
									<view class="name">优惠金额</view>
									<view class="amount">¥{{(renders.discount_amount/100).toFixed(2)}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="payments">
				<view class="payments d-padding">
					<view class="payments_box section">
						<view class="payment_box">
							<view class="payment d-flex justify-content-between align-items-center" v-for="(payment, index) in renders.payments" :key="index">
								<view class="left d-flex align-items-center">
									<view class="icon_box">
										<u--image :src="payment.icon" width="80rpx" height="80rpx"  mode="aspectFit" :bgColor="globalData.colors.current.section" class="icon">
										  <template v-slot:loading>
										     <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
										  </template>
										  <template v-slot:error>
										     <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
										  </template>
										</u--image>
									</view>
									<view class="infos">
										<view class="name fw-bolder">{{payment.name}}</view>
										<view class="tip vice_text">{{payment.tip}}</view>
									</view>
								</view>
								<view class="right">
									<view class="domxee_icon color fw-bolder iconfont icon-yuanquan_xuanzhong font-40" v-if="data.sections.formData.alias == payment.alias" @click="data.sections.formData.alias = ''">&#xe730;</view>
									<view class="domxee_icon vice_text iconfont icon-yk_yuanquan font-40" @click="data.sections.formData.alias = payment.alias" v-else>&#xe72f;</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view id="submit">
				<view class="submit d-padding">
					<view class="submit_button button_bg text-center fw-bolder" @click="getPaymentParams">立即支付</view>
				</view>
			</view>
			<view id="tip">
				<view class="tip color fw-bolder text-center" @click="navigateAction('orders.lists')">返回我的订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {

				},
				shows: {

				},
				renders: {
					order_sn: '',
					pay_amount: 0,
					goods_amount: 0,
					express_amount: 0,
					discount_amount: 0,
					payments: []
				},
				data: {
					sections: {
						formData: {
							order_sn: '',
							alias: ''
						}
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			options.platform = uni.$u.platform;
			options.os = uni.$u.os();
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);
			},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('请稍候');
				//开始准备
				that.ready = false;
				//发起请求
				that.nii_common.request.build('payments/information', that.options, 'POST', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置信息
					that.renders = res.data;
					//设置提交信息
					that.data.sections.formData = {order_sn: res.data.order_sn, alias: ''};
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
					//返回购物车
					setTimeout(function (){that.navigateAction('account.orders')}, 1500);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				});	
			},
			paySuccess: function () {
				//设置对象
				let that = this;
				//跳转订单列表
				that.navigateAction('orders.lists', {}, 'launch');
			},
			getPaymentParams: function() {
				//设置对象
				let that = this;
				//判断是否设置支付方式
				if (uni.$u.test.isEmpty(that.data.sections.formData.alias)) {
					//提示失败
					that.nii_common.toastAlert('请选择支付方式');
					//返回失败
					return false;
				}
				//loading
				that.nii_common.toastLoading('请稍候...');
				//请求获取获取支付参数
				that.nii_common.request.build('payments/method', that.data.sections.formData, 'POST', function (res) {
					//根据支付方式处理
					switch (that.data.sections.formData.alias) {
						case 'wechat.mp':
							WeixinJSBridge.invoke('getBrandWCPayRequest', res.data,
								function(res) {
									if (res.err_msg === "get_brand_wcpay_request:ok") {
										//返回订单
										that.paySuccess();
									}
							});
						break;
						case 'wechat.mini':
							//发起支付
							uni.requestPayment({
							    provider: 'wxpay',
								timeStamp: res.data['timeStamp'],
								nonceStr: res.data['nonceStr'],
								package: res.data['package'],
								signType: res.data['signType'],
								paySign: res.data['paySign'],
								success: function (res) {
									//返回订单
									that.paySuccess();
								},
								fail: function (err) {
									//提示失败
									that.nii_common.toastAlert(JSON.stringify(err));
								}
							});
						break;
						case 'alipay.app':
						case 'wechat.app':
							//发起支付
							uni.requestPayment({
								provider: that.data.sections.formData.alias == 'alipay.app' ? 'alipay' : 'wxpay',
								orderInfo: res.data,
								success: function (res) {
									//返回订单
									that.paySuccess()
								},
								fail: function (err) {
									//提示失败
									that.nii_common.toastAlert(err.errMsg);
								}
							});
						break;
						case 'alipay.h5':
							//创建元素
							document.querySelector('body').innerHTML = res.data;
							//调用提交
							document.forms[0].submit();
						break;
						case 'wechat.h5':
							//跳转页面
							window.location.href = res.data.h5_url;
						break;
						default:
							//打印数据
							console.log(res);
							that.nii_common.toastAlert(res.msg, 'success');
							setTimeout(function () {
								//返回订单
								that.paySuccess();
							}, 1500);
						break;
					}
				}, function (res) {
					//提示失败
					that.nii_common.toastAlert(res.msg);
				}, function () {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			
			//TODO：页面滑动触底时的事件
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	#header_wrapper {
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		.domxee_icon {
			font-size: 40rpx;
			line-height: 34rpx;
		}
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		#card {
			margin-top: 40rpx;
			.card {
				.card_box {
					padding: 40rpx 30rpx;
					border-radius: 20rpx;
					.sn {
						font-size: 24rpx;
						line-height: 40rpx;
					}
					.infos {
						margin-top: 30rpx;
						.left {
							font-size: 60rpx;
							line-height: 84rpx;
							margin-right: 20rpx;
						}
						.right {
							.line {
								margin-top: 10rpx;
								font-size: 24rpx;
								line-height: 34rpx;
								.name {
									margin-right: 40rpx;
								}
							}
							.line:first-child {
								margin-top: 0;
							}
						}
					}
				}
			}
		}
		#payments {
			margin-top: 30rpx;
			.payments {
				.payments_box {
					padding: 40rpx;
					border-radius: 20rpx;
					.payment {
						margin-top: 50rpx;
						.left {
							.icon_box {
								width: 80rpx;
								height: 80rpx;
								margin-right: 20rpx;
							}
							.infos {
								.name {
									font-size: 28rpx;
									line-height: 40rpx;
								}
								.tip {
									margin-top: 4rpx;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
						}
						.right {
							.domxee_icon {
								font-size: 40rpx;
								line-height: 44rpx;
							}
						}
					}
					.payment:first-child {
						margin-top: 0;
					}
				}
			}
		}
		#submit {
			margin-top: 60rpx;
			.submit {
				.submit_button {
					margin: 0 auto;
					width: 580rpx;
					padding: 28rpx;
					font-size: 32rpx;
					line-height: 44rpx;
				}
			}
		}
		#tip {
			margin-top: 40rpx;
			.tip {
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
	}
</style>
